import React, { Component } from 'react';
import styles from './TimeChoose.css'; 
 
import { Tabs,Radio ,DatePicker,Button} from 'antd'; 
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const { RangePicker } = DatePicker;

const { TabPane } = Tabs; 

  

//时间选择
class TimeChoose extends Component {
  constructor(props){
    super(props);
    this.formRef = React.createRef();
    this.state={ 
        value: 1,
    }
  }
 
  //tab切换
  callback = (key) =>{
    console.log(key);
  }
  //单选
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  //时间选择
   onChange=(value, dateString)=> {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  } 
  //时间确定
   onOk=(value)=> {
    console.log('onOk: ', value);
  }
    
  componentDidMount(){
      
  } 
  render() {  
    return (
      <div className={styles.centerBox}> 
             <Tabs   onChange={this.callback}>
                <TabPane tab="实况" key="1">
                    <div className={styles.tabBox}> 
                        <div>
                            <span >时间选择</span>
                            <Radio.Group onChange={this.onChange} value={this.state.value}>
                                <Radio value={3}>3h</Radio>
                                <Radio value={6}>6h</Radio>
                                <Radio value={12}>12h</Radio>
                                <Radio value={24}>24h</Radio>
                            </Radio.Group>
                        </div>
                        <div>
                            <RangePicker
                                locale={locale} 
                                showTime={{ format: 'HH' }}
                                format="YYYY-MM-DD HH"
                                onChange={this.onChange}
                                onOk={this.onOk}
                            /> 
                        </div>
                        <div  className={styles.query}>
                            确定
                        </div> 
                    </div>
                </TabPane>
                <TabPane tab="预报" key="2">
                <div className={styles.tabBox}> 
                        <div>
                            <span >时间选择</span>
                            <Radio.Group onChange={this.onChange} value={this.state.value}>
                                <Radio value={3}>3h</Radio>
                                <Radio value={6}>6h</Radio>
                                <Radio value={12}>12h</Radio>
                                <Radio value={24}>24h</Radio>
                            </Radio.Group>
                        </div>
                        <div>
                            <RangePicker
                                locale={locale} 
                                showTime={{ format: 'HH' }}
                                format="YYYY-MM-DD HH"
                                onChange={this.onChange}
                                onOk={this.onOk}
                            /> 
                        </div>
                        <div  className={styles.query}>
                            确定
                        </div> 
                    </div>
                </TabPane> 
            </Tabs>
      </div>
    );
  }
}

export default TimeChoose;
